<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		function $$ (id){
				return document.getElementById(id);
			}
		window.onload = function(){
			var cnv = $$("canvas");
			var cxt = cnv.getContext("2d");
			createSector(cxt,cnv.width / 2,cnv.height/2,100,0,30);
			cxt.fillStyle = 'red';
			cxt.fill();
			createSector(cxt,cnv.width / 2,cnv.height/2,100,30,70);
			cxt.fillStyle = 'orange';
			cxt.fill();
			createSector(cxt,cnv.width / 2,cnv.height/2,100,70,100);
			cxt.fillStyle = 'yellow';
			cxt.fill();
			createSector(cxt,cnv.width / 2,cnv.height/2,100,100,150);
			cxt.fillStyle = 'greenyellow';
			cxt.fill();
			createSector(cxt,cnv.width / 2,cnv.height/2,100,150,190);
			cxt.fillStyle = 'cornflowerblue';
			cxt.fill();createSector(cxt,cnv.width / 2,cnv.height/2,100,190,250);
			cxt.fillStyle = 'cadetblue';
			cxt.fill();
			createSector(cxt,cnv.width / 2,cnv.height/2,100,250,300);
			cxt.fillStyle = 'mediumpurple';
			cxt.fill();
			createSector(cxt,cnv.width / 2,cnv.height/2,100,300,360);
			cxt.fillStyle = 'black';
			cxt.fill();
		}
		function createSector(cxt,x,y,r,angle1,angle2){
			cxt.beginPath();
			cxt.moveTo(x,y);
			cxt.arc(x,y,r,angle1*Math.PI/180,angle2 * Math.PI/180,false);
			cxt.closePath();
		}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300"style="border: 1px dashed gray;"></canvas>
	</body>
</html>
